<style type="text/css">
	.label-selected {
		width: 100%;
		min-height: 34px;
		margin: 0px;
		background-color: #fff;
		position: relative;
		border-radius: 4px;
		border: 1px solid #ddd;
		box-shadow: inset 0 1px 1px rg;
	}
	.label-selected li {
		display: inline-block;
		height: 28px;
		line-height: 23px;
		font-size: 14px;
		padding: 0 10px;
		border: 1px solid #006fc4;
		border-radius: 4px;
		cursor: pointer;
		margin: 10px 10px;
		color: #fff;
		background: #36a5f9;
	}
	#labelItem {
		margin-bottom: 10px;
		display: none;
	}
	.label-item {
		border: 1px solid #e6e6e6;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 4px;
		position: relative;
		overflow: hidden;
		background: #fff;
	}
	.label-item li {
		display: inline-block;
		height: 28px;
		line-height: 23px;
		font-size: 14px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer;
		margin: 10px 10px;
		color: #333;
		background: #ddd;
	}
	.label-item .selected {
		color: #ccc;
	}
	#edit_keywords{
		margin:3px;
		width:150px;
		border-style:none;
		height:28px;
		padding-left: 10px;
		color: #333333;
	}
</style>

<div class="keywords_wrap">
	<div class="label-selected">
		<!--<input type="hidden" name="post[post_keywords]">-->
		<input type="text" id="edit_keywords" placeholder="按空格键确定输入" onkeyup="this.value=this.value.replace(/[, ]/g,'')" autocomplete="off">
	</div>
	<div class="" id="labelItem">
		<div class="label-item">
			<li data="在"><span>在</span></li>
			<li data="门户管理"><span>门户管理</span></li>
			<li data="中"><span>中</span></li>
			<li data="添加"><span>添加</span></li>
			<li data="文章标签"><span>文章标签</span></li>
			<li data="或"><span>或</span></li>
			<li data="直接输入标签"><span>直接输入标签</span></li>
			<li data="按空格键输入"><span>按空格键输入</span></li>
		</div>
	</div>
	<!--<a href="javascript:;" class="show-labelitem">展开标签库</a>-->
	<a href="javascript:;" class="hide-labelitem" style="display: none;">收起标签库</a>
	<a href="javascript:;" class="replacelable" style="float:right;display: none;">换一批</a>
</div>

<!--<script type="text/javascript">
//处理默认分类
	var $_GET = (function(){
	    var url = window.document.location.href.toString();
	    var u = url.split("?");
	    if(typeof(u[1]) == "string"){
	        u = u[1].split("&");
	        var get = {};
	        for(var i in u){
	            var j = u[i].split("=");
	            get[j[0]] = j[1];
	        }
	        return get;
	    } else {
	        return {};
	    }
	})();
	var $cid = '';
	if($_GET['category']){
		$cid = $_GET['category'];
		set_input_cid();
	}else{
		if($("input[name='post[categories]']").val()){
			$cid = $("input[name='post[categories]']").val();
			set_input_cid();
		}
	}
	function set_input_cid(){
		if($cid){
			for(var i = 0; i < 2; i++){
				$('.nav-tabs li').eq(i).find("a").attr("href",$('.nav-tabs li').eq(i).find("a").attr('href')+"?category="+ $cid); 
			}	
		}
		$("#js-categories-name-input").hide();
		$("input[name='post[categories]']").attr("value", $_GET['category']);
		$("input[name='post[categories]']").attr("type", "text");
		$("input[name='post[categories]']").attr("disabled","disabled");
	}
</script>-->

<script type="text/javascript">
	$(function() {
		var page = 0;//标签页码
		getKeyword();//加载文章标签
		//隐藏原关键词输入框
		$("input[name='post[post_keywords]']").hide();
		$("input[name='post[post_keywords]']").parent().find('.help-block').hide();
		//点击标签框
		$(".label-selected").on("click", function() {
			$(".show-labelitem").hide();
			$(".hide-labelitem").show();
			$("#labelItem").show();
			$(".replacelable").show();
		});
		//显示关键词库
/*		$(".show-labelitem").on("click", function() {
			$(this).hide();
			$(".hide-labelitem").show();
			$("#labelItem").show();
		});*/
		//收起关键词库
		$(".hide-labelitem").on("click", function() {
			$(this).hide();
			$(".show-labelitem").show();
			$(".replacelable").hide();
			$("#labelItem").hide();
		});
		//添加关键词选择框
		if($("input[name='post[post_keywords]']").val() != undefined) {
			$("input[name='post[post_keywords]']").parent().prepend($(".keywords_wrap"));
			//处理原input中的关键显示
			var $input_keywords = $("input[name='post[post_keywords]']").val();
			if ($input_keywords) {
				$input_keywords = $input_keywords.split(",")
				if ($input_keywords.length > 0) {
					for (var i = 0; i < $input_keywords.length; i++) {
						if ($input_keywords[i]) {
							var $input_keywords_html = "<li data=\"" + $input_keywords[i] + "\">x <span>" + $input_keywords[i] +
								"</span></li>";
							$(".label-selected").prepend($input_keywords_html);
							$(".label-item li").each(function() {
								if ($(this).attr("data") == $input_keywords[i]) {
									$(this).addClass("selected");
								}
							});
						}
					}
				}
			}
		}else{
			$(".keywords_wrap").hide();	
		}
		//按空格键输入关键词
	    $("#edit_keywords").keydown(function(e) {
	        if (e.keyCode == 32) {
				if($("#edit_keywords").val()){
		       		var $edit_keywords_html = "<li data=\"" + $("#edit_keywords").val() + "\">x <span>" + $("#edit_keywords").val() + "</span></li>";
		       		$(".label-selected").prepend($edit_keywords_html);
		       		//添加到关键词输入框中
					if($("input[name='post[post_keywords]']").val()) {
		       			$("input[name='post[post_keywords]']").attr("value", $("input[name='post[post_keywords]']").val() + ',' + $("#edit_keywords").val());
					}else{
						$("input[name='post[post_keywords]']").attr("value", $("#edit_keywords").val());	
					}
				}
	       		$("#edit_keywords").val("");
	        }  
	    }); 
		$(".label-item").on("click", "li", function() {
			var id = $(this).attr("data");
			var text = $(this).children("span").html();
			var labelHTML = "<li data='" + id + "''>x " + text + "</li>";
			if ($(this).hasClass("selected")) {
				return false;
			} else if ($(".label-selected").children("li").length >= 10) {
				alert("最多可以选择10个");
				return false;
			}
			$(".label-selected").prepend(labelHTML);
			val = '';
			for (var i = 0; i < $(".label-selected").children("li").length; i++) {
				val += $(".label-selected").children("li").eq(i).attr("data") + ',';
			}
			val = val.substr(0, val.length - 1);

			$("input[name='post[post_keywords]']").attr("value", val);
			$(this).addClass("selected");
		});
		var val = "";
		$(".label-selected").on("click", "li", function() {
			var id = $(this).attr("data");
			val = '';
			$(this).remove();
			for (var i = 0; i < $(".label-selected").children("li").length; i++) {
				val += $(".label-selected").children("li").eq(i).attr("data") + ',';
			}
			$("input[name='post[post_keywords]']").attr("value", val);
			$(".label-item").find("li[data='" + id + "']").removeClass("selected");
		});

		//点击更换标签
		$(".replacelable").on("click", function() {
			getKeyword();
		});
		function getKeyword(){
			page += 1;
			$.ajax({
				url: "{:cmf_plugin_url('ArticleKeywords://ApiIndex/getKeywords')}?tagmoduleid={$tagmoduleid}&page=" + page,
				type: "GET",
    			datatype:"json",
				success: function(data) {
					console.log(data);
					if(data.code==1){
						if(data.msg.data.length>0){
							$(".label-item").find("li").remove(); //删除原有数据
							var html = '';
							//alert(data.msg);
							var data_arr = data.msg.data;
							if(page==data.msg.last_page){
								page=0;
							}
							for (var i in data_arr) {
								//拼接标签
								html += "<li data=\"" + data_arr[i].name + "\">x <span>" + data_arr[i].name + "</span></li>"; 
							}
							//添加新标签
							$(".label-item").prepend(html);//append
						}
					}else{
						alert('发生错误');
					}
				},
				error: function() {
					alert("错误~~");
				}
			});
		}
	})
</script>
